{% extends 'myadmin/base.html' %}

{% block title %}
<title>图书分类管理</title>
{% endblock %}

{% block content %}
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">图书分类管理</strong> / <small>Book classification management</small></div>
      </div>

      <hr>
      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
          <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
              <button type="button" class="am-btn am-btn-default"><a href="{% url 'myadmin_type_add' %}"> 添加</a></button>
            </div>
          </div>
        </div>
      </div>

      <div class="am-g">
        <div class="am-u-sm-12">
          <form class="am-form">
            <table class="am-table am-table-striped am-table-hover table-main">
              <thead>
              <tr>
                  <th class="table-check"><input type="checkbox" /></th>
                  <th>ID</th>
                  <th>分类名</th>
                  <th>父级分类</th>
                  <th>路径</th>
                  <th>操作</th>
              </tr>
              </thead>
              <tbody>
                {% for i in type_data %}
                <tr>
                  <td><input type="checkbox" /></td>
                  <td>{{ i.id }}</td>
                  <td>{{ i.sj }}<span class="tname">{{ i.name }}</span></td>
                  <td>{% if i.pid == 0%}顶级分类{% else %}{{ i.pname }}{% endif %}</td>
                  <td>{{ i.path }}</td>
                  <td>
                    <div class="am-btn-toolbar">
                      <div class="am-btn-group am-btn-group-xs">
                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span><a href="javascript:;" class="tpl-table-black-operation-del">删除</a></button>
                      </div>
                    </div>
                  </td>
                </tr>
              {% endfor %}
              </tbody>
            </table>
            <div class="am-cf">
              共 15 条记录
            </div>
            <hr />
            <p>注：.....</p>
          </form>
        </div>

      </div>
    </div>

    <footer class="admin-content-footer">
      <hr>
      <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MITs license.</p>
    </footer>

  </div>

  <!-- content end -->

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<footer>
  <hr>
  <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
</footer>

  <style>
    #alertmsg{
      width: 10%;
      height: 50px;
      background: rgba(200,100,50,0.5);
      color: #ffff;
      top:10%;
      left:50%;
      position: fixed;
      transform: translate(-50%,-50%);
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      display: none;
    }
  </style>
  <div id="alertmsg"><span></span></div>

{% endblock %}

{% block script %}
  // 弹框方法
  function showmsg(msg){
    $('#alertmsg').find('span').text(msg)
    $('#alertmsg').show()
    setTimeout(function(){
      $('#alertmsg').hide()
    },3000)
  }

  // 分类修改
  // 绑定双击事件
  $('.tname').dblclick(function(){
    // 先获取name
    tname = $(this).text()
    $this = $(this)
    // 创建一个input
    inp = $('<input tyep="text" value="'+tname+'" style="color:red;">')
    // 把input加入到span中
    $(this).html(inp)
    // 让input框里的内容选中状态
    inp.select()

    //给input绑定丧失焦点事件，获取新的类名
    inp.blur(function(){
      newname = $(this).val()
      // 判断当前的newname是否更新
      if(newname == tname){
        // 如果没有更新，则还是原来的名字
        $this.text(tname)
      }else{
        // 如果更新了，先获取类名的id
        id = $(this).parents('tr').find('td:nth-child(2)').text()

        //发送ajax请求到后台，进行数据删除
        $.get('{% url 'myadmin_type_edit' %}',{'id':id,'name':newname},function(data){
          // 判断是否成功,根据返回的code来判断
          if(data['code'] == 0){
            // 如果成功，类名换成newname
            $this.text(newname)
            showmsg(data['msg'],true)
          }else{
            // 如果失败，类名换成name
            $this.text(tname)
            showmsg(data['msg'],false)
          }
        },'json')
      }
    })
  })


  // 给删除按钮绑定一个单击事件
  $('.tpl-table-black-operation-del').click(function(){
    // 获得当前的 数据 id
    // 参考 https://www.itranslater.com/qa/details/2583872759252124672
    id = $(this).parents('tr').find('td:nth-child(2)').text()
    a = $(this)

    //发送ajax请求到后台，进行数据删除
    $.get('{% url 'myadmin_type_del' %}',{'id':id},function(data){
      // 判断是否成功,根据返回的code来判断
      if(data['code'] == 0){
        // console.log($(this))
        // 删除这一行数据
        a.parents('tr').remove()
      }
      //alert(data['msg'])
      showmsg(data['msg'])
    },'json')
  })
{% endblock %}


